<template>
  <div class="wrap">
    <div class="title">
      <div>
        <van-icon name="arrow-left" size="20" style="margin-left: 10px" @click="onClickLeft" />
      </div>
      <div>{{ userName }}</div>
      <div>
        <van-icon name="ellipsis" size="22" style="margin-right: 10px" @click="onClickRight" />
      </div>
    </div>

    <div style="width: 100%;height: 60px;"></div>

    <!-- <div> -->
    <div class="content_box" id="box" ref="scrollBox">
      <div class="timer" v-if="!currentSessionPage.more">已经到顶了</div>

      <van-loading type="spinner" v-if="loading" size="24px" />

      <div :class="item.type == '1' ? 'userbox' : 'userbox2'" v-for="(item, index) in chatList" :key="index"
        style="margin: 16px 0px;">
        <div :class="item.type == '1' ? 'nameInfo' : 'nameInfo2'">
          <div style="font-size: 14px">{{ item.type == 1 ? '不用他透露姓名的用户' : '卫莱电官方客服' }}</div>
          <div :class="item.type == '1' ? 'contentText' : 'contentText2'"  @click="handleClick">
            <span v-html="item.message"></span>
          </div>
        </div>
        <div>
          <van-image round width="40px" height="40px"
            :src="item.type == 1 ? 'https://wld001.oss-cn-nanjing.aliyuncs.com/file/2024/06/03/93e296bb-5409-49a8-ad59-ff06d79327d8.png' : 'https://wld001.oss-cn-nanjing.aliyuncs.com/file/2024/04/28/3385b9a7-6caa-412e-ad04-59721e1b606d.png'" />
        </div>
      </div>

      <!-- 占位快 -->
      <div style="width: 100%;height: 50px;"></div>
    </div>
    <!-- </div> -->

    <div class="bottom">
      <van-field v-model="inputValue" center placeholder="请输入内容" rows="1">
        <template #button>
          <van-button size="small" type="primary" @click="setUp">发送</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { time } from 'echarts';


export default {
  data() {
    return {
      //聊天数据
      chatList: [],
      path: "ws://192.168.2.7:8615/userWebSocket", //后台的websocket地址，找后端要
      //用户名
      userName: "卫莱电官方客服",
      //输入内容
      inputValue: "",
      //滚动条距离顶部距离
      scrollTop: 0,
      channel: 1,
      openId: '',
      phone: '',
      ws: '',

      currentSessionPage: {
        page: 1,
        limit: 12,
        more: true,
      },
      loading: false,
    };
  },
  created() {
    //http://localhost:8080/#/customerConsultation?channel=1&openId=12314&phone=177729720069
    let url = window.location.href;
    console.log(url,'444');
    // 获取参数部分
    let params = url.split('?')[1];
    let paramsObj = {}
    if (params != undefined) {
      let paramsArr = params.split('&');
      for (let i = 0; i < paramsArr.length; i++) {
        let param = paramsArr[i].split('=');
        paramsObj[param[0]] = param[1];
      }
      console.log(paramsObj,'33');
      this.channel = JSON.parse(paramsObj.channel)
      this.openId = JSON.parse(paramsObj.openId)
      this.phone = JSON.parse(paramsObj.phone)
      this.initWebpack()
    } else {
      this.$message.error('登录去')
      this.$router.replace('/PCchatInterface')
    }

  },
  mounted() {
    console.log(111);
  },
  methods: {
    //返回
    onClickLeft() {
      console.log("返回");
    },
    // 初始化websocket链接
    initWebpack() {
      if (typeof WebSocket === "undefined") {
        this.$message.error('您的浏览器不支持socket')
      } else {


        let path = this.path + '/' + this.openId + '/' + this.channel + '/' + this.phone
        console.log(path,'444');
        this.ws = new WebSocket(path); //实例
        console.log('开启链接');
        this.ws.onopen = this.onopen; //监听链接成功
        this.ws.onmessage = this.onmessage; //监听后台返回消息
        this.ws.onclose = this.onclose; //监听链接关闭
        this.ws.onerror = this.onerror; //监听链接异常
      }
    },
    //连接成功
    async onopen() {
      console.log("连接成功");

      this.currentSessionPage.openId = this.openId
      let res = await this.$api.information_list(this.currentSessionPage)
      if (res.data.list.length == this.currentSessionPage.limit) {
        this.currentSessionPage.more = true
      } else {
        this.currentSessionPage.more = false
      }
      this.chatList = res.data.list
      this.chatList = this.chatList.reverse()

      this.defaultSendingInformation()

      console.log(this.chatList);
      // 页面滚动到底部
      this.$nextTick(() => { // 一定要用nextTick
        this.setPageScrollTo();
        //页面滚动条距离顶部高度等于这个盒子的高度
        this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
        this.$forceUpdate()
      })

      // if (this.ws.readyState == 1) {
      //   //如果连接正常，给后天发送一个值，可以自定义，然后后台返回我们一个信息，我们接收到后会触发onmessage方法回调
      //   this.ws.send(
      //     "链接上啦！！！"
      //   );
      // }
      // this.start(); //链接成功后开启心跳
    },

    // 获取问题列表 刚链接上直接发送
    async defaultSendingInformation() {
      let pem = {}
      pem.page = 1
      pem.limit = 100
      // 获取所有问题列表
      let res = await this.$api.frequentlyAskedQuestions_list(pem)

      let defaultMessage = `<div>
             <div>卫莱电客服为您提供服务</div>
             <div>温馨提示:充电站属于公共区域,请您务必保管好您的车辆等私人物品，充电时不要离开现场，插拔充电枪注意用电安全。</div>
             <div style="width:100%;height:1px;background-color: #a8a8a8;margin: 3px 0px;"></div>
              <ul style="color:purple">`

              res.data.list.forEach(item => {
                defaultMessage += `<li style="margin: 3px 0px;cursor: pointer;" >${item.problem}</li>`;
              });
              defaultMessage += `
          </ul>
        </div>
      `;


      this.chatList.push({
        message: defaultMessage,
        type: 2
      })
      console.log(this.chatList,'4444');

    },

    handleClick(event){
      console.log(`点击了${event.target.textContent}`);
    },

    //接受后台信息回调
    onmessage(e) {

      console.log(e, '后台返回的');


      let obj = JSON.parse(e.data)
      obj.type = 2
      this.chatList.push(obj)
      /**这里写自己的业务逻辑代码**/
      // 页面滚动到底部
      this.$nextTick(() => { // 一定要用nextTick
        this.setPageScrollTo();
        //页面滚动条距离顶部高度等于这个盒子的高度
        this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
      })
    },
    //关闭连接回调
    onclose(e) {
      console.log("连接关闭");
    },
    //连接异常回调
    onerror(e) {
      console.log("出现错误");
    },

    //发送
    setUp() {
      let jsonObj = JSON.stringify({
        message: this.inputValue,
        customerServiceAccount: null,
      });
      this.websocketsend(jsonObj);
      this.chatList.push({ message: this.inputValue, type: 1 })
      console.log("发送内容:", this.inputValue);
      this.inputValue = "";

      // 页面滚动到底部
      this.$nextTick(() => {
        this.setPageScrollTo();
        this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
      });
    },
    //数据发送
    websocketsend(Data) {
      this.ws.send(Data)
      console.log(`数据发送` + Data);
    },
    //更多
    onClickRight() {
      console.log("按钮");
    },
    //滚动条默认滚动到最底部
    setPageScrollTo(s, c) {
      //获取中间内容盒子的可见区域高度
      this.scrollTop = document.querySelector("#box").offsetHeight;
      var that = this
      setTimeout((res) => {
        //加个定时器，防止上面高度没获取到，再获取一遍。
        if (that.scrollTop != this.$refs.scrollBox.offsetHeight) {
          that.scrollTop = document.querySelector("#box").offsetHeight;
        }
      }, 100);
      //scrollTop：滚动条距离顶部的距离。
      //把上面获取到的高度座位距离，把滚动条顶到最底部
      this.$refs.scrollBox.scrollTop = this.scrollTop;
      //判断是否有滚动条,有滚动条就创建一个监听滚动事件，滚动到顶部触发srTop方法
      if (this.$refs.scrollBox.scrollTop > 0) {
        this.$refs.scrollBox.addEventListener("scroll", this.srTop);
      }
    },
    //滚动条到达顶部
    srTop() {
      //判断：当滚动条距离顶部为0时代表滚动到顶部了
      if (this.$refs.scrollBox.scrollTop == 0) {
        //逻辑简介：
        //到顶部后请求后端的方法，获取第二页的聊天记录，然后插入到现在的聊天数据前面。
        //如何插入前面：可以先把获取的数据保存在 A 变量内，然后 this.chatList=A.concat(this.chatList)把数组合并进来就可以了
        if (this.currentSessionPage.more) {
          this.currentSessionPage.page++
          this.getmoreList()
        }
        //拿聊天记录逻辑:
        //第一次调用一个请求拉历史聊天记录，发请求时参数带上页数 1 传过去，拿到的就是第一页的聊天记录，比如一次拿20条。你显示出来
        //然后向上滚动到顶部时，触发新的请求，在请求中把分页数先 +1 然后再请求，这就拿到了第二页数据，然后通过concat合并数组插入进前面，依次类推，功能完成！
        console.log('到顶了，滚动条位置 :', this.$refs.scrollBox.scrollTop);
      }
    },

    // 获取更多聊天记录
    async getmoreList() {
      this.loading = true
      this.currentSessionPage.openId = this.openId
      let res = await this.$api.information_list(this.currentSessionPage)
      if (res.data.list.length == this.currentSessionPage.limit) {
        this.currentSessionPage.more = true
      } else {
        this.currentSessionPage.more = false
      }
      res.data.list = res.data.list.reverse()

      this.chatList = [...res.data.list, ...this.chatList]
      this.loading = false
      this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollTop + 200
    },
  },
};
</script>

<style scoped>
.customerServiceInformation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 6px 0px;
}

.userInformation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 6px 0px;
}

.wrap {
  min-height: 100vh;
  width: 100%;
  overflow: auto;
  /* position: relative; */
}

.title {
  height: 40px;
  width: 100%;
  position: fixed;
  background-color: #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;

}

.bottom {
  min-height: 50px;
  width: 100%;
  border-top: 1px solid #eaeaea;
  position: fixed;
  bottom: 0;
}

.content_box {
  /* 
    中间栏计算高度，110是包含了上下固定的两个元素高度90
    这里padding：10px造成的上下够加了10，把盒子撑大了，所以一共是20要减掉
    然后不知道是边框还是组件的原因，导致多出了一些，这里再减去5px刚好。不然会出现滚动条到顶或者底部的时候再滚动的话就会报一个错，或者出现滚动条变长一下的bug
    */
  width: 100%;
  /* height: 70%; */

  max-height: 88vh;
  overflow: scroll;
  /* padding: 10px; */
  /* box-sizing: border-box; */
  /* padding-top: 60px; */

}



.timer {
  text-align: center;
  color: #c2c2c2;
}

/* 发送的信息样式 */
/* 
  右边消息思路解释：首先大盒子userbox内放两个盒子，一个放头像，一个放用户名和发送的内容，我们先用flex让他横向排列。
  然后把写文字的大盒子设置flex：1。这个属性的意思就是让这个元素撑满父盒子剩余位置。然后我们再把文字盒子设置flex，并把他对齐方式设置为尾部对齐就完成了基本的结构，然后微调一下就可以了
  */
.userbox {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
}

.nameInfo {
  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-right: 10px;
  /* 用align-items把元素靠右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.contentText {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
  text-align: justify;
}

/* 接收的信息样式 */
/* 
  左边消息思路解释：跟上面一样，就是换一下位置，首先通过把最外层大盒子的排列方式通过flex-direction: row-reverse;属性翻转，也就是头像和文字盒子换位置
  然后删除掉尾部对齐方式，因为不写这个默认是左对齐的。我们写的左边就没必要再写了。
  */
.userbox2 {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10px;
}

.nameInfo2 {
  /* 用flex：1把盒子撑开 */
  /* flex: 1; */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
}

.contentText2 {
  background-color: #fff;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 41%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
  text-align: justify;
}
</style>